<template>
    <div class="jvm-container">
        <section class="graph-container">
            <header>内存使用</header>
            <div id="memory-used"></div>
        </section>
        <section class="graph-container">
            <header>堆内存使用率</header>
            <div id="memory-usage"></div>
        </section>
        <section class="graph-container">
            <header>CPU使用率</header>
            <div id="cpu-usage"></div>
        </section>
        <section class="graph-container">
            <header>垃圾回收</header>
            <div id="gc-count"></div>
        </section>
    </div>
</template>

<script>
    import graph from '../../../assets/js/chart.js';

    export default {
        name: 'Jvm',
        data() {
            return {
                timer: '',
            };
        },
        methods: {
            loadChartData(charts) {
                const [memoryUsedChart, memoryUsageChart, cpuUsageChart, gcCountChart] = charts;

                this.$store
                    .dispatch('jvm/loadMetrics', this.$route.params.id)
                    .then(() => {
                        // 2. 加载图表数据.
                        memoryUsedChart.changeData(this.$store.state.jvm.memoryUsed);
                        memoryUsageChart.changeData(this.$store.state.jvm.memoryUsages);
                        cpuUsageChart.changeData(this.$store.state.jvm.cpuUsages);
                        gcCountChart.changeData(this.$store.state.jvm.gcCounts);
                    });
            },
        },
        mounted() {
            // 1. 绘制图表.
            const memoryUsedChart = graph.drawLineChart({
                container: 'memory-used',
                position: 'time*usage',
                color: 'item',
                alias: '内存使用 (单位MB)',
            });
            const memoryUsageChart = graph.drawPieChart({
                container: 'memory-usage',
                position: 'item*percent',
            });
            const cpuUsageChart = graph.drawPieChart({
                container: 'cpu-usage',
                position: 'item*percent',
            });
            const gcCountChart = graph.drawLineChart({
                container: 'gc-count',
                position: 'time*count',
                color: 'item',
                alias: '垃圾回收次数',
            });

            // 2. 载入数据.
            this.loadChartData([
                memoryUsedChart,
                memoryUsageChart,
                cpuUsageChart,
                gcCountChart,
            ]);

            // 3. 设定定时器.
            this.timer = window.setInterval(() => {
                this.loadChartData([
                    memoryUsedChart,
                    memoryUsageChart,
                    cpuUsageChart,
                    gcCountChart,
                ]);
            }, 10_000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.$store.commit('jvm/clearData');
        },
    };
</script>

<style lang="scss" scoped>
    .graph-container {
        float: left;
        margin: 0 2% 2% 0;
        padding: 30px 48px;
        width: 49%;
        height: 370px;
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);

        &:nth-of-type(2n) {
            margin-right: 0;
        }

        & > header {
            margin-bottom: 24px;
            font-size: 20px;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
        }
    }
</style>
